<template>
    <div class="header">
      <router-link to="/detail/0002">
        <div class="iconfont header-back">&#xe624;</div>
      </router-link>
      <div class="tab-wrap">
        <comment-tab @clickTab="handleTabClick" :isActive="isActive">攻略</comment-tab>
        <comment-tab @clickTab="handleTabClick" :isActive="!isActive">点评</comment-tab>
      </div>
    </div>
</template>

<script>
import CommentTab from './tab.vue'
export default {
  props: {},
  data () {
    return {
      isActive: true
    }
  },
  methods: {
    handleTabClick: function () {
      this.isActive = !this.isActive
      // 要告诉父组件谁处于激活的状态
      // isActive:true -->攻略 -->0  ,isActive:false -->点评 -->1
      this.$emit('changeTab', this.isActive === true ? 0 : 1)
    }
  },
  components: {
    CommentTab
  },
  computed: {}
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
.header
  height: $headerHeight
  line-height: $headerHeight
  font-size: 0.36rem
  text-align :center
  color :#ffffff
  background-color :$bgColor
  position :fixed
  top: 0
  left :0
  right :0
  z-index :5
  .header-back
    width :0.64rem
    color :#ffffff
    position :absolute
    font-size :0.4rem
    text-align: center
    top: 0
    left : 0
  .tab-wrap
    width :80%
    padding :0 10%
    color :#fff
</style>
